<template>
  <div class="login">
    <div class="wrapper">
      <Icon name="logo"/>
      <Input name="工号" placeholder="请输入工号" type="text" v-model="userno"/>
      <Input name="密码" placeholder="请输入密码" type="password" v-model="password"/>
      <Button name="立即绑定" @click.native="onLogin" @keyup.enter.native="onLogin">立即绑定</Button>
    </div>
    <div class="copyright">{{copyrightDate}}</div>
    <van-loading v-if="$store.state.showLoading" type="spinner" size="64" color="#1989fa" vertical></van-loading>
  </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component, Inject} from "vue-property-decorator";
  import Input from "@/components/Input.vue";
  import Button from "@/components/Button.vue";
  import {Md5} from "md5-typescript";
  import {message} from "ant-design-vue";
  import Layout from "@/components/Layout.vue";
  import dayjs from "dayjs";
  import Icon from "@/components/Icon.vue";
  import {axios} from "@/helper/axios";
  import {Toast} from "vant";

  @Component({
    components: {Layout, Button, Input, Icon}
  })
  export default class Login extends Vue {
    @Inject("reload") private injectedValue!: () => void;
    password = "";
    userno = "";

    created() {
      this.$store.commit("getUser");
      const user = this.$store.state.user;
      this.userno = user ? user.userno : "";
    }

    get copyrightDate() {
      return `Copyright © ${dayjs().year()} Sanxin.All Rights Reserved`;
    }

    onLogin() {
      if (!this.userno) {
        message.info("请输入工号", 0.5);
        return;
      }
      if (!this.password) {
        message.info("请输入密码", 0.5);
        return;
      }
      this.$store.commit("showLoading", true);
      const data = {userno: this.userno, pwd: Md5.init(this.password)};
      axios(data, "/sx/order/login").then((res) => {
        Toast.success({message: "登录成功", duration: 1000});
        setTimeout(() => {
          this.$store.commit("saveUser", {user: {userno: this.userno}});
          this.$router.push("/nav");
        }, 1100);
      }, () => {
        return;
      });
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/style/login";
</style>